<script>
import { computed, defineComponent, onMounted, reactive, toRaw } from 'vue'
import DataTable from '@Components/dataTable'
import { createPagination, Messages } from '@Config/config'
import * as Antd from 'ant-design-vue'

/***
 * 
 *    
 * 一次性数据调用方式
 * balanceWin({
        params: {
          record: _r.data.records,
        },
      })

  分页加载数据方式 _codition是返回分页或其它请求数据时附加的数据

      balanceWin({
        params: {
          record: async (_condition) => {
            let _r = await orderSendOrderRedressList({
              sendNo: record.sendNo,
              ..._condition,
            })
            return _r.data
          },
        },
      })
 * 
 */
export default defineComponent({
  props: {
    record: {
      type: [Array, Function],
      required: true,
    },

    columns: {
      type: Array,
      default: () => {
        return []
      },
    },
    ower: {
      type: Function,
      default: () => {
        return null
      },
    },

    tableAttr: {
      type: Object,
      default: () => {
        return {}
      },
    },
    moreAttr: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  emits: ['close'],
  components: {
    DataTable,
  },
  setup(props, context) {
    let tableData = reactive({
      data: {
        source: [],
        columns: props.columns,
      },
    })

    let loading = reactive({ search_loading: false })

    let pagination = reactive({
      data: createPagination(
        () => {
          loading.search_loading = true
          return props.record
            .bind(null, { ...toRaw(pagination?.data) })()
            .then((x) => {
              tableData.data.source = x.records
              pagination.data.current = x.index
              pagination.data.pageSize = x.size
              pagination.data.total = x.total
              loading.search_loading = false
            })
        },
        true,
        false
      ),
    })

    if (typeof props.record == 'function') {
      loading.search_loading = true
      props.record({ ...toRaw(pagination.data) }).then((x) => {
        loading.search_loading = false
        tableData.data.source = x.records
        pagination.data.current = x.index
        pagination.data.pageSize = x.size
        pagination.data.total = x.total
      })
    } else if (props.record instanceof Array) {
      // eslint-disable-next-line vue/no-setup-props-destructure
      tableData.data.source = props.record
    }

    /**
     * 如果record是一个function则表示获取数据需要分页操作，如果是一个数组则代表数据是一次加载完毕，不需要分页设置
     *
     */
    let isAsynData = computed(() => {
      return typeof props.record == 'function'
    })

    onMounted(() => {
      props.ower({ data: tableData, context: context })
    })

    let tableAttr = computed(() => {
      return props.tableAttr
    })
    let moreAttr = computed(() => {
      return props.moreAttr
    })

    return {
      tableData,
      pagination,
      isAsynData,
      context,
      tableAttr,
      loading,
      moreAttr,
    }
  },
  render() {
    return (
      <div>
        <DataTable
          data={this.tableData}
          uiAttr={{
            scroll: { x: false },
            bordered: true,
            tableLayout: 'fixed',
            pagination: !this.isAsynData,
            ...this.moreAttr,
          }}
          {...this.tableAttr}
          loading={this.loading}
        >
          {this.context.slots.title && this.context.slots.title()}
        </DataTable>
        {this.isAsynData && (
          <Antd.Affix>
            <div class="affix" offsetBottom={0}>
              <Antd.Pagination {...this.pagination.data} />
            </div>
          </Antd.Affix>
        )}
      </div>
    )
  },
})
</script>
